<template>
  <div>
  <div class="container" style="text-align: center">
    <h1 style="font-weight: bold">论文提交</h1>
    <el-form :model="form">

      <div class="container">
        <p class="title" >上传文件</p>
        <el-upload
            id="file"
            ref="upload"
            class="upload-demo"
            action="#"
            :limit="1"
            :on-exceed="handleExceed"
            :auto-upload="false"
            @change="updateFile"
        >
          <template #trigger>
            <el-button type="primary">选择上传的文件</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip text-red">
              只能上传一个文件，新的文件会被覆盖
            </div>
          </template>
        </el-upload>
      </div>
      <div class="container">
        <el-form-item label="论文题目：" :rules="[{required: true,}]">
          <el-input v-model="form.title" id="title"/>
        </el-form-item>
        <el-form-item label="论文作者：" :rules="[{required: true,}]">
          <el-input v-model="form.authorOneName" id="author"/>
        </el-form-item>
        <el-form-item label="论文类别：" prop="category" :rules="[{required: true,}]">
          <el-select v-model="form.type" placeholder="选择类别">
            <el-option label="理工" value="理工" />
            <el-option label="人文社科" value="人文社科" />
          </el-select>
        </el-form-item>
<!--        <el-form-item label="论文类别：" :rules="[{required: true,}]">-->

<!--          <el-input v-model="form.type" id="author"/>-->
<!--        </el-form-item>-->
        <el-form-item label="论文描述：">
          <el-input v-model="form.paperAbstract" type="textarea" id="reason"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(this)">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </div>



    </el-form>

  </div>
</div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import {ElMessage, genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import axios from "axios";
import { inject } from 'vue'
let paperID = inject('$paperID')


const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
//论文信息部分表格
const form = reactive({
  "authorOneName": "",
  "authorThreeName": "blah",
  "authorTwoName": "blah",
  "filePath": "1234",
  "paperAbstract": "",
  "status": "0",
  "title": "",
  "type": ""
})
var file = reactive({})

const onSubmit = () => {
  let info = form
  console.log(JSON.stringify(form));
  let infoJson = JSON.stringify(form);
  console.log(infoJson)
  console.log(localStorage.getItem('ID'))
  axios.post(`paper/add`, info, {
    headers:{
      'Content-Type': 'application/json',
      'session':localStorage.getItem('ID'),
    }
  }).then(res=>{
    if(res.data.code === 0){
      paperID = res.data.data;

      // let forms = new FormData()
      //
      // let files = document.getElementById('file').files
      //
      // Array.from(files).forEach(item => {
      //   forms.append('file', item)
      // })
      //
      // const options = {
      //   method: 'POST',
      //   headers: { 'Content-Type': 'application/json', 'session':localStorage.getItem('ID'), },
      //   data: forms,
      //   url: `paper/upload`,
      // };
      // axios(options);
      let param = new FormData();//创建form对象
      console.log("file"+file);
      console.log("paperid"+paperID);
      if(JSON.stringify(file)==="{}") {
        ElMessage("请上传文件");
      } else {
        param.append("file", file);//为创建的form对象增加上传的文件
        param.append("paperId", paperID);//如果需要上传其他字段，在这里增加
        if(form.title==="")
        {
          ElMessage('请填写题目');
          return false;
        }
        else if(form.authorOneName===""){
          ElMessage('请填写作者');
          return false;
        }
        else if(form.type===""){
          ElMessage('请填写类型');
          return false;
        }
        let config = { headers: { 'Content-Type': 'multipart/form-data', 'session':localStorage.getItem('ID'),  } }//修改请求头
        let url = "paper/upload";
        console.log(param);
        axios.post(url, param, config).then((res) => {
          console.log(res, "res");
          if(res.data.code === 0) {
            ElMessage("提交成功");
            proxy.$router.push('/permission');
          } else {
            ElMessage("提交失败");
          }
        });
      }
    } else {
      ElMessage('提交失败')
    }

  })
  console.log('submit!')
}
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();//获取原型
const updateFile = (e) => {
  console.log(e);
  file = e.raw;//拿到上传的file
}



</script>
<style>
.title{
  font-weight: bold;
  font-size: 20px;
}
.paper-info{
  width: 300px;
  height: 30px;
  font-size: 18px;
  border-radius: 5px;
}
</style>